html{
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.mask-box{
    width:100%;
    height: 100%;
    background-color: #213043;
    position:absolute;
    left:0;
    top:0;
    filter:blur(8px);
}
.mask{
    width:99%;
    height: 100%;
    background: url(../images/bg.jpg) no-repeat;
    background-size:cover;
    opacity: .8;
    margin: auto;
}
.wrap{
    width: 350px;
    height: 350px;
    background: radial-gradient(#4A4138 67%, #757272 65%);
    border-radius: 100%;
    position: relative;
    padding: 12px;
    border: 8px solid #4A4138;
    box-shadow: inset 0px 0px 10px 7px #313131;
}
.turnplate {
    transform: rotate(150deg);
    width: 100%;
    height: 100%;
    border-radius: 100%;
    margin: auto;
    overflow: hidden;
}

.layer, .rotation {
    position: absolute;
    transform-origin: left top;
    left: 50%;
    top: 50%;
    width: 50%;
    height: 50%;
    border: 2px solid #2F211E;
    box-sizing: border-box;
    padding: 15px;
    box-shadow: inset 0px 0px 2px 1px #929090;
    z-index: 10;
}

.layer .item, .layer .amount{
    position: absolute;
    transform: scale(-1) skewX(120deg) rotate(285deg);
    text-align: center;
    color: white;
    font-size: 14px;
}
.layer .item{
    left: 36px;
    top: 26px;
    width: 70px;
}
.layer .amount{
    left: 33px;
    top: 18px;
    font-size: 16px;
    width: 50px;
}
.layer:nth-child(1), .rotation{
    transform: rotate(30deg) skewX(60deg);
}
.layer:nth-child(2){
    transform: rotate(60deg) skewX(60deg);
}
.layer:nth-child(3){
    transform: rotate(90deg) skewX(60deg);
}
.layer:nth-child(4){
    transform: rotate(120deg) skewX(60deg);
}
.layer:nth-child(5){
    transform: rotate(150deg) skewX(60deg);
}
.layer:nth-child(6){
    transform: rotate(180deg) skewX(60deg);
}
.layer:nth-child(7){
    transform: rotate(210deg) skewX(60deg);
}
.layer:nth-child(8){
    transform: rotate(240deg) skewX(60deg);
}
.layer:nth-child(9){
    transform: rotate(270deg) skewX(60deg);
}
.layer:nth-child(10){
    transform: rotate(300deg) skewX(60deg);
}
.layer:nth-child(11){
    transform: rotate(330deg) skewX(60deg);
}
.layer:nth-child(12){
    transform: rotate(0deg) skewX(60deg);
}

.inner-bar{
    width: 150px;
    height: 150px;
    border-radius: 100%;
    background: radial-gradient(#4B6B7A 63%, #232323 69%,#dad1d1);
    position: relative;
    top: 100px;
    left: 100px;
    border: 10px solid #665546;
    box-sizing: border-box;
    box-shadow: 0px 0px 2px 3px #232323;
    z-index: 100;
}
.rotate-btn{
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background: radial-gradient(#6eb2c3,#12BDE8 64%,#1d778e 61%, #093D65 25%);
    position: relative;
    top: 15px;
    left: 15px;
    box-sizing: border-box;
    box-shadow: 0px 0px 0px 2px #303b3e;
    transform: rotate(210deg);
    padding: 37px 0 20px 15px;
    color: white;
    font-size: 18px;
    cursor: pointer;
}
.rotate-btn:hover{
    background: radial-gradient(#12BDE8 64%,#1d778e 65%, #093D65 25%);
}
.rotation{
    background: #3ea230;
    z-index: 1;
    /*animation: rotating 3s steps(12) infinite;*/
    transition: all cubic-bezier(.17,.67,.26,.92);
}

@-webkit-keyframes rotating {
    100% {transform: rotate(390deg) skewX(60deg);}
}

.quote{
    width: 200px;
    border-radius: 15px;
    position: relative;
    min-height: 100px;
    padding: 18px;
    background-color: #4A4138;
    color: white;
    visibility: hidden;
}
.quote.show{
    animation: show 3s;
}
/*小三角*/
.quote::before{
    content: "";
    width: 0;
    height: 0;
    border: 15px solid;
    border-color: transparent #4A4138 transparent transparent;
    position: absolute;
    top: 50px;
    left: -30px;
}

@-webkit-keyframes show {
    70%, 100% {visibility: visible; transform: translateX(100px);}
}